<template>
  <div>
    <!-- navbar -->
    <MyNavBar></MyNavBar>
    <van-index-bar class="indexBar" :sticky="false" highlight-color="#fb6463">
      <van-index-anchor
        v-for="(item, index) in firstName"
        :key="index"
        :index="index"
      >
        <span class="indexWord">{{ index }}</span>
        <van-cell
          v-for="(citem, cindex) in item"
          :key="cindex"
          :title="citem"
        />
      </van-index-anchor>
    </van-index-bar>
  </div>
</template>

<script>
import { getCities } from "../api/locationApi";
import MyNavBar from "../components/MyNavBar.vue";
export default {
  components: {
    MyNavBar,
  },
  data() {
    return {
      Cities: null,
      firstName: null,
      FirstPinYin: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "J",
        "K",
        "L",
        "M",
        "N",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "W",
        "X",
        "Y",
        "Z",
      ],
    };
  },

  mounted() {
    getCities().then((res) => {
      this.Cities = res.cities;
      // console.log(res);
      let firstName = {};
      this.FirstPinYin.forEach((item) => {
        firstName[item] = [];
        //使用map遍历获取来的数据，做索引值的分配
        this.Cities.map((el) => {
          //取出的拼音转大写
          let Initials = el.pinyin[0].toUpperCase();
          // 将第一个转为大写的字母与定义的FirstPinYin中的元素做匹配
          if (Initials == item) {
            //将符合条件的地区push到对应的数组
            firstName[item].push(el.name);
          }
        });
      });
      this.firstName = firstName;
      // console.log(firstName);
    });
  },
};
</script>

<style lang="scss" scoped></style>
